<style>
    @-webkit-keyframes window-show-action {
        from {
            opacity: 0.5;
            transform: scale(0.5);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    #rule-window-container ::-webkit-scrollbar {
        height: 5px;
        width: 5px;
    }

    #rule-window-container ::-webkit-scrollbar-track {
        background-color: rgb(235,235,235);
    }

    #rule-window-container ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #777777;
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
    }

    #rule-window-container * {
        float: none !important;
        color: #000 !important;
        font-family: Microsoft Yahei,Tahoma,sans-serif !important;
        font-weight: 500 !important;
        font-style: normal !important;
        font-size: 13px !important;
        box-sizing: initial !important;
        box-shadow: none !important;
        list-style-type:none !important;
        vertical-align: middle !important;
        padding: 0px !important;
        margin: 0px !important;
    }

    #rule-window-container .window-title {
        height: 30px  !important;
        line-height: 30px  !important;
        background-color: #F0F1F1  !important;
        cursor: move  !important;
    }

    #rule-window-container .window-title b {
        display: inline-block  !important;
        margin: 0px 10px  !important;
    }

    #rule-window-container #rule-window {
        all: initial !important;
        position: absolute !important;
        top: 24px !important;
        left: 24px !important;
        background-color: white !important;
        cursor: default !important;
        box-shadow: 0px 0px 10px 0px rgb(100, 100, 100) !important;
        animation-name: window-show-action
        animation-duration: 300ms;
    }

    #rule-window-container #rule-window-main {
        margin: 10px !important;
    }

    #rule-window-container #data-window {
        all: initial !important;
        display: none !important;
        position: absolute !important;
        top: 24px !important;
        left: calc(50vw - 400px) !important;
        background-color: white !important;
        box-shadow: 0px 0px 10px 0px rgb(100, 100, 100) !important;
        animation-name: window-show-action
        animation-duration: 300ms;
        cursor: default !important;
    }

    #rule-window-container #data-table {
        width: 800px !important;
        height: 500px !important;
        overflow: auto !important;
        background-color: white !important;
    }

    #rule-window-container #data-table table  {
        all: initial !important;
        table-layout:fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0px !important;
    }

    #rule-window-container #data-table table td > div {
        padding-left: 5px !important;
        font-size: 12px !important;
        height: 25px !important;
        width: 130px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        border: 1px solid rgb(240, 240, 240) !important;
    }

    #rule-window-container #data-table thead td div {
        font-weight: 700 !important;
        background-color: rgb(245, 245, 245) !important;
    }

    #rule-window-container #data-table tbody tr:hover {
        background-color: rgb(245, 245, 245) !important;
    }

    #rule-window-container #data-table table tr td:first-child > div {
        width: 40px !important;
        text-align: center !important;
        background-color: rgb(245, 245, 245) !important;
    }

    #rule-window-container select,#rule-window-container input {
        outline: none !important;
        display: inline-block !important;
        height: 24px !important;
        line-height: 24px !important;
        border-radius: 3px !important;
        border: solid 1px rgb(200, 200, 200) !important;
        background-color: white !important;
    }

    #rule-window-container #rule-window select:focus {
        border: 1px solid #007DBD !important;
    }

    #rule-window-container #rule-window input:focus {
        border: 1px solid #007DBD !important;
    }

    #rule-window-container .checkboxStyle {
        vertical-align: middle !important;
        width: 16px !important;
        cursor: pointer !important;
    }

    #rule-window-container #setting-div {
        border: solid 1px rgb(200, 200, 200) !important;
        background-color: white !important;
        margin-top: 10px !important;
        padding: 5px 0px !important;
    }

    #rule-window-container #setting-div > div {
        margin: 8px !important;
    }

    #rule-window-container #exit-time {
        margin-left: 10px !important;
    }

    #rule-window-container #exit-time input {
        margin: 0px 3px !important;
        text-align: center !important;
        width: 30px !important;
    }

    #rule-window-container #rule-window ul {
        border-radius: 3px !important;
        border: solid 1px rgb(200, 200, 200) !important;
        background-color: white !important;
        margin: 5px 0px !important;
        padding: 0px !important;
    }

    #rule-window-container #rule-window li {
        line-height: 20px !important;
        list-style-type: none !important;
        margin: 3px 0 !important;
    }

    #rule-window-container #rule-window li:hover {
        background-color: #F0F1F1 !important;
    }

    #rule-window-container #rule-content {
        margin-top: 10px !important;
        width: 310px !important;
    }

    #rule-window-container #item-list {
        display: none !important;
        max-height: 50vh !important;
        overflow: auto !important;
    }

    #rule-window-container #item-list ul {
        border: solid 1px #2196F3 !important;
        padding: 0px !important;
    }

    #rule-window-container .close-icon {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
        display: inline-block !important;
        float: right !important;
        margin: 5px 10px !important;
        background-image: url('{{path}}/images/close.png') !important;
        background-repeat:no-repeat !important;
        background-size:cover !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .close-icon:hover {
        opacity: 1 !important;
    }

    #rule-window-container .table-icon {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
        display: inline-block !important;
        float: right !important;
        margin: 5px 10px 5px 0 !important;
        background-image: url('{{path}}/images/表格.png') !important;
        background-repeat:no-repeat !important;
        background-size:cover !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .table-icon:hover {
        opacity: 1 !important;
    }

    #rule-window-container .setting-icon {
        width: 18px !important;
        height: 18px !important;
        cursor: pointer !important;
        display: inline-block !important;
        float: right !important;
        margin: 5px 10px 5px 0 !important;
        background-image: url('{{path}}/images/设置.png') !important;
        background-repeat:no-repeat !important;
        background-size:cover !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .setting-icon:hover {
        opacity: 1 !important;
    }

    #rule-window-container .info-icon {
        width: 18px !important;
        height: 18px !important;
        cursor: default;
        display: inline-block !important;
        float: right !important;
        margin: 10px 0 !important;
        background-image: url('{{path}}/images/提示.png') !important;
        background-repeat:no-repeat !important;
        background-size:cover !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .item-index {
        border-right: solid 1px rgb(200, 200, 200) !important;
        text-align: center !important;
        width: 28px !important;
        height: 25px !important;
        display: inline-block !important;
    }

    #rule-window-container .item-text {
        display: inline-block !important;
        vertical-align: middle !important;
        width: 210px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        padding: 0 5px !important;
    }

    #rule-window-container .delete-icon {
        margin: 5px !important;
        float: right !important;
        background-image: url('{{path}}/images/删除.png') !important;
        background-size:cover !important;
        width: 14px !important;
        height: 14px !important;
        cursor: pointer !important;
        display: inline-block !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .delete-icon:hover {
        opacity: 1 !important;
    }

    #rule-window-container .down-icon {
        margin: 5px !important;
        float: right !important;
        background-image: url('{{path}}/images/下移.png') !important;
        background-size:cover !important;
        width: 14px !important;
        height: 14px !important;
        cursor: pointer !important;
        display: inline-block !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .down-icon:hover {
        opacity: 1 !important;
    }

    #rule-window-container .alter-icon {
        margin: 5px !important;
        float: right !important;
        background-image: url('{{path}}/images/编辑.png') !important;
        background-size:cover !important;
        width: 14px !important;
        height: 14px !important;
        cursor: pointer !important;
        display: inline-block !important;
        opacity: 0.5 !important;
    }

    #rule-window-container .alter-icon:hover {
        opacity: 1 !important;
    }

    #rule-window-container .button-style {
        display: inline-block;
        font-size: 12px !important;
        border-radius: 5px;
        border: solid 1px rgb(200, 200, 200) !important;
        cursor: pointer !important;
        text-decoration: none !important;
        text-align: center !important;
        background-size: 7px !important;
        padding: 8px 5px !important;
        width: 60px !important;
        float: right !important;
        margin: 10px 0px 10px 5px !important;
    }

    #rule-window-container .button-style:hover {
        border: solid 1px #007DBD !important;
        background-color: rgb(250, 250, 250) !important;
        color: #007DBD !important;
    }

    #rule-window-container .method-button {
        display: inline-block !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        border: 1px solid #bfcbd9 !important;
        text-align: center !important;
        outline: none !important;
        margin: 5px 10px !important;
        padding: 5px 0px !important;
        width: 90px !important;
        color: #fff !important;
    }

    #rule-window-container .method-button:hover {
        border-color: #000 !important;
    }

    #rule-window-container #method-0 {
        background-color: #2a8cd7 !important;
    }

    #rule-window-container #method-1 {
        background-color: #f7ba2a !important;
        /*background-color: #28ccaa !important;*/
    }

    #rule-window-container #method-2 {
        background-color: #f16270 !important;
    }

</style>

<div id="data-window">
    <div id="data-window-title" class="window-title">
        <b>数据窗口</b>
        <div title="关闭" id="close-data-window" class="close-icon"></div>
    </div>
    <div id="data-table">
        <table>
            <thead id="data-table-head"></thead>
            <tbody id="data-table-body"></tbody>
        </table>
    </div>
</div>

<div id="rule-window">
    <div id="rule-window-title" class="window-title">
        <b>步骤窗口</b>
        <div title='预处理' id='rule-window-setting' class="setting-icon"></div>
        <div title="数据展示" id="open-data-window" class="table-icon"></div>
    </div>
    <div id="rule-window-main">
        <div id="method-div" style="margin-left: 10px !important;">
            <div>
                <span title='点选模式'>点选模式：</span>
                <div style="display: inline-block;">
                    <div title='单元素选取模式' class="method-button" id='method-0'>单选取</div>
                    <div class="info-icon" title="可配合备选区域使用&#10;特有操作：执行分页;执行滚动;输入文本"></div>
                </div>
            </div>
            <div>
                <span title='区域模式'>区域模式：</span>
                <div style="display: inline-block;">
                    <div title='多元素选取模式' class="method-button" id='method-1'>多选取</div>
                    <div class="info-icon" title="可用于选取备选区域&#10;特有操作：备选区域"></div>
                </div>
            </div>
            <div>
                <span title='智能提取'>智能模式：</span>
                <div style="display: inline-block;">
                    <div title='智能选取模式' class="method-button" id='method-2'>智能提取</div>
                    <div class="info-icon" title="建议在初始时使用&#10;可提取类似表格或列表型数据"></div>
                </div>
            </div>
        </div>
        <div id="setting-div">
            <div>
                <b title='下载模式'>下载模式</b>
                <select title='选择模式' id="download-type">
                    <option title='Chrome模式（模拟浏览器）' value="1">Chrome模式</option>
                    <option title='Speed模式（通用网络蜘蛛）' value="0">Speed模式</option>
                </select>
                <span id='exit-time'>
                    <b title='等待加载（需大于内容加载完成时间）'>等待加载</b>
                    <input title='填写时间' type="text" value="3">秒
                </span>
            </div>
            <div>
                <b title='属于本层的URL可以重复访问'>允许重复访问</b>
                <input type="checkbox" id="reloadable" class="checkboxStyle">
            </div>
            <div id="scroll-div">
                <b title='用于确保全部内容已加载'>初始滚动底部</b>
                <input type="checkbox" id="enable-scroll" class="checkboxStyle" checked="checked">
            </div>
        </div>
        <div style="margin-top: 10px !important;">
            <div id="normal-explain">请在插件选择适合的模式进行添加 [ 操作步骤 ]</div>
            <div id="restore-explain" style="color: red !important;text-align: center !important;display: none !important;">还原过程中,切勿操作,请稍等</div>
        </div>
        <div id="rule-content">
            <ul id="item-list"></ul>
        </div>
        <div>
            <div title='保存发送到适配器页面（先确保适配器页面存在）' id="rule-save" class="button-style">保存</div>
            <div title='取消' id="rule-undo" class="button-style">取消</div>
        </div>
    </div>
</div>